import { Form, CustomEnum, FormItem, PageSearchItem, SearchInput } from 'custom/index'
import { FormItemOption } from 'custom/custom/FormItem'

export default class PageSearch extends Form {
  public static name: CustomEnum = 'PageSearch'

  protected static props = {
    hasBox: {
      type: Boolean,
      default: true
    }
  }

  protected static emits = {
    search: 'refresh',
    changeColumn: 'changeColumn'
  }

  protected slots: { [key in CustomEnum]?: string } = {
    SearchInput: 'input',
    PageListAuthButtonGroup: 'auth',
    PageSearchItem: 'default'
  }

  protected get props() {
    const box = this.children.get('default') || new Map()
    return {
      hasBox: box.size > 0
    }
  }

  public addInputItem(name: string, placeholder = '', defaultValue = '') {
    const input = new SearchInput(name)
    input.setPropModel(name, defaultValue)
    input._props.placeholder = placeholder
    this.addChild(input, 'input')
    return this
  }
  public useInputItem(name: string, placeholder = '', defaultValue = '') {
    const input = new SearchInput(name)
    input.setPropModel(name, defaultValue)
    input._props.placeholder = placeholder
    this.addChild(input, 'input')
    return input
  }

  public useItem(name: string | FormItemOption) {
    const option = typeof name === 'string' ? { prop: name } : name
    const { tag, prop, label, default: defaultValue, modelLabel, ...props } = option
    const itemBox = new PageSearchItem(prop || 'PageSearchItem')
    itemBox._props.label = label
    itemBox._props.prop = prop

    const item = new FormItem(prop || 'FormItem')
    item.setPropModel(prop, defaultValue, modelLabel)
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, props)
  
    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  public useRangeItem(option: FormItemOption<string[]>) {
    const { tag, prop, label, default: defaultValue, modelLabel, ...props } = option
    const itemBox = new PageSearchItem(prop[0] || 'PageSearchItem')
    itemBox._props.label = label
    itemBox._props.prop = prop[0]
    const item  = new FormItem(prop[0] || 'FormItem')
    prop.forEach((p, index) => {
      const m = modelLabel || []
      const d = defaultValue || []
      item.setPropModel(p, d[index], m[index])
    })
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, props)
    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  useAuthButton() {
    const authBtn = this.add('PageListAuthButtonGroup')
    return authBtn
  }
  addAuthButton() {
    this.useAuthButton()
    return this
  }

  end() {
    return this.upto('ListPage')
  }
}
